<template>
  <div className="home">
    <!-- 定义图表外层容器 -->
    <div id="myHomeChart" ref="homeEcharts"></div>
  </div>
</template>

<script>
import {markRaw} from 'vue'
import sampleData from './test1.json'

export default {
  name: 'Test1',
  components: {},
  data() {
    return {
      graph: sampleData
    };
  },

  mounted() {
    // 调用当前图表
    this.dataChart()
  },
  methods: {
    // 绘制图表
    dataChart() {
      //初始化图表，this.$refs.homeEcharts获取到图表容器
      var myChart = markRaw(this.$echarts.init(this.$refs.homeEcharts))
      // 初始化配置（官网实例详情左侧代码，直接复制过来按项目需求修改即可）
      var option = {
        tooltip: {},
        legend: [
          {
            data: this.graph.categories.map(function (a) {
              return a.name;
            })
          }
        ],
        series: [
          {
            name: 'Les Miserables',
            type: 'graph',
            layout: 'none',
            data: this.graph.nodes,
            links: this.graph.links,
            categories: this.graph.categories,
            roam: true,
            label: {
              show: true,
              position: 'right',
              formatter: '{b}'
            },
            labelLayout: {
              hideOverlap: true
            },
            scaleLimit: {
              min: 0.4,
              max: 2
            },
            lineStyle: {
              color: 'source',
              curveness: 0.3
            }
          }
        ]
      }
      // 把参数配置放到容器里
      myChart.setOption(option)

    },
    // 销毁实例(看项目需要进行销毁实例)
    destroyChart() {
      this.$echarts.init(this.$refs.homeEcharts).dispose();
    }
  }
}
</script>
<style>
/* 给图表容器定义宽高 */
#myHomeChart {
  width: 2000px;
  height: 1000px;
}
</style>



